<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slof(案例)</title>
    <script src="../../vue2.js"></script>
    <style>
        ul li{
            list-style: none;
        }

        ul{
            width: 300px;
            height: 100vh;
        }

    </style>
</head>
<body>
<div id="box">
    <navbar>
<!--        <button @click="handleShowparent" slot="btn">show</button>-->

        <template #btn>
            <button @click="handleShowparent">show</button>
        </template>

    </navbar>
    <sidebar v-show="isShow"></sidebar>
</div>
<script>
    Vue.component("navbar", {
        data(){
            return{
                myname:"hhl"
            }
        },
        template: `<div>
            <slot name="btn"></slot>
            <span>电影</span>
        </div>`,
    })

    Vue.component("sidebar", {
        template: `<div>
            <ul style="background-color: skyblue">
                <li>111111</li>
                <li>222222</li>
                <li>33333333</li>
                <li>444444444</li>
                <li>555555555</li>
                <li>6666666</li>
                <li>777777777</li>
                <li>88888888</li>
                <li>99999999999</li>
            </ul>
        </div>`
    })

    new Vue({
        el: "#box",
        data: {
            isShow: true,
        },
        methods: {
            handleShowparent() {
                this.isShow = !this.isShow
            }
        }
    })
</script>
</body>
</html>